<template>
  <div class="column view_card shadow-2">
    <div class="col row no-wrap justify-between items-center content-center">
      <div class="col text-center q-mt-lg">
        <div>今日IP</div>
        <div class="text-h5">{{statInfo.todayIp}}</div>
      </div>
      <div class="col text-center">
        <div>今日访问</div>
        <div class="text-h5">{{statInfo.todayVisitCount}}</div>
      </div>
      <div class="col text-center">
        <div>总访问量</div>
        <div class="text-h5">{{statInfo.totalVisitCount}}</div>
      </div>
    </div>
    <div class="col" id="mainTrend" :style="{height:'360px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'visitline',
  data() {
    return {
      statInfo: { todayIp: 100, todayVisitCount: 1000, totalVisitCount: 859964 },
      xData: [],
      yData: [],
      height: 100,
    };
  },
  computed: {
  },
  created() {
  },
  mounted() {
    this.$axios.get(`/sys/loginfo?token=${Math.random()}`).then(({ result }) => {
      this.statInfo = result;
    });

    this.$axios.get(`/sys/visitInfo?token=${Math.random()}`).then(({ result }) => {
      const xData = [];
      const ipData = [];
      const visitData = [];
      result.forEach((dt) => {
        xData.push(dt.tian);
        ipData.push(dt.ip);
        visitData.push(dt.visit);
      });
      const mainTrendChart = echarts.init(document.getElementById('mainTrend'));
      const colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae',
        '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];

      const option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        legend: {
          data: [],
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '访问量',
            min: 0,
            position: 'left',
          },
          {
            type: 'value',
            name: 'IP数',
            min: 0,
            position: 'right',
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: 'visit',
            type: 'bar',
            data: visitData,
          },
          {
            name: 'ip',
            yAxisIndex: 1,
            type: 'line',
            data: ipData,
          },
        ],
      };
      mainTrendChart.setOption(option);
    });
  },
};
</script>

<style >
</style>
